<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <style>
        #map {
            height: 800px;
            width: 100%;
            margin: 0 auto;
        }
    </style>
    <script
            src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=DQEDAAex8umkXMk5Kmxg4uYT7hglA13CV6iqLtThTKdXVgWCUJPPkZnyAzXnaTlUfqFQmvez2/uxJaIc1X4IgbnbF1fvcy6unkWIyA=="></script>
</head>

<body>
<script>
    var directionsService;
    var directionsRenderer;
    var markerOrigin, markerDestination;
    // 创建路径规划请求体
    var DirectionsRequest = {};
    let param = getLocation()
    DirectionsRequest.origin = {
        lat: parseFloat(param.olat),
        lng: parseFloat(param.olng)
    };
    DirectionsRequest.destination = {
        lat: parseFloat(param.dlat),
        lng: parseFloat(param.dlng)
    };
    //根据经纬度和地球周长获取缩放级别
    const zoomLevel = calculateZoomLevel(DirectionsRequest.origin.lat, DirectionsRequest.origin.lng, DirectionsRequest.destination.lat,  DirectionsRequest.destination.lng);
    console.log(zoomLevel);
    function initMap() {
        directionsService = new HWMapJsSDK.HWDirectionsService();
        directionsRenderer = new HWMapJsSDK.HWDirectionsRenderer();
        var mapOptions = {};
        // 设置地图中心点坐标
        // mapOptions.center = { lat: (param.olat+param.dlat) / 2, lng: (param.olng+param.dlng) / 2 };
        mapOptions.center = { lat: (DirectionsRequest.origin.lat + DirectionsRequest.destination.lat) / 2, lng: (DirectionsRequest.origin.lng + DirectionsRequest.destination.lng) / 2 };
        // 设置地图初始化缩放级别
        mapOptions.zoom = zoomLevel;
        // 设置地图语言
        mapOptions.language = 'CHI';
        // 设置地图加载时使用的瓦片类型，支持vector（矢量）或raster（栅格）
        mapOptions.sourceType = 'raster';
        //设置缩放按钮
        mapOptions.zoomControl = true;
        //设置我的位置
        mapOptions.locationControl = true
        // 设置AT 填写自己的key
        // mapOptions.authOptions = { accessToken: 'xxx' }
        // 创建地图对象
        var map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
        //    initPosition(map)
        markerOrigin = new HWMapJsSDK.HWMarker({
            position: DirectionsRequest.origin,
            label: '我'
        });

        markerDestination = new HWMapJsSDK.HWMarker({
            position: DirectionsRequest.destination,
            label: '买家'
        });

        markerOrigin.setMap(map);
        markerDestination.setMap(map);
        // 调用路径规划接口
        directionsService.routeDriving(DirectionsRequest, callback);
        directionsRenderer.setMap(map);
        // 通过回调函数获取路径规划结果
        function callback(DirectionsResult, DirectionsStatus) {
            if (DirectionsStatus == '0') {
                // 通过HWDirectionsRenderer对象渲染路径
                directionsRenderer.setDirections(DirectionsResult);
            }
        }

    }
    //根据经纬度计算缩放级别
    function calculateZoomLevel(lat1, lng1, lat2, lng2) {
        const lat=180
        const lng=360
        const zoomLat = Math.log2(lat/Math.abs(lat2 - lat1));
        const zoomLng = Math.log2(lng/Math.abs(lng2 - lng1));
        let zoom = Math.min(zoomLat,zoomLng)
        return Math.ceil(zoom);
    }
    //通过url获取经纬度信息
    function getLocation() {
        let params = window.location.search
        let returl = new Object();
        if (params.indexOf("?") != -1) {
            let queryString = params.substr(1);
            let queryParams = queryString.split("&");
            for (let i = 0; i < queryParams.length; i++) {
                let [key, value] = queryParams[i].split("=");
                returl[key] = decodeURI(value);
            }
        }
        console.log(returl)
        return returl
    }
</script>
<div id="map"></div>
</body>

</html>
